<template>
	<view>
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">{{ act == 'edit' ? '编辑地址' : '添加地址' }}</block>
		</cu-custom>
		<mpvue-city-picker
			:themeColor="cityPicker.themeColor"
			ref="mpvueCityPicker"
			:pickerValueDefault="cityPicker.cityPickerValue"
			@onCancel="onCancel"
			@onConfirm="onConfirm"
		></mpvue-city-picker>
		<view class="qui-cells mt5" v-if="act == 'add'" style="display: none;">
			<view class="qui-cell">
				<view class="cell-hd"><image :src="imgurl + 'icon_wx_1.png'" mode="" class="img60" style="vertical-align: bottom;"></image></view>
				<view class="cell-bd"><text class="fs28 fw600">获取微信地址</text></view>
				<view class="cell-ft arrow-r"></view>
			</view>
		</view>
		<view class="qui-cells mt15">
			<view class="qui-cell">
				<view class="cell-label"><text class="fs28 text-default">收货人</text></view>
				<view class="cell-bd"><input type="text" class="cu-input fw600 fs26" placeholder="填写收货人姓名" v-model="CneeAddress.CneeUser" /></view>
			</view>
			<view class="qui-cell">
				<view class="cell-label"><text class="fs28 text-default">手机号码</text></view>
				<view class="cell-bd"><input type="text" class="cu-input fw600 fs26" placeholder="填写收货人手机号" v-model="CneeAddress.Phone" placeholder-class="fw500" /></view>
			</view>
			<view class="qui-cell">
				<view class="cell-label"><text class="fs28 text-default">所在地区</text></view>
				<view class="cell-bd" @tap="chooseCity" v-text="CneeAddress.Province + ' ' + CneeAddress.City + ' ' + CneeAddress.District"></view>
				<view class="cell-ft arrow-r"></view>
			</view>
			<view class="qui-cell">
				<view class="cell-label"><text class="fs28 text-default">详细地址</text></view>
				<view class="cell-bd">
					<input type="text" class="cu-input fw600 fs26" placeholder="填写详细街道信息" v-model="CneeAddress.Address" placeholder-class="fw500" />
				</view>
			</view>
		</view>
		<view class="qui-cells mt15">
			<view class="qui-cell">
				<view class="cell-label"><text class="fs28 text-default">地址标签</text></view>
				<view class="cell-bd">
					<view class="flex" style="    justify-content: flex-end;">
						<view class="tag-2" :class="{ active: CneeAddress.Tag == '家' }" @tap="CneeAddress.Tag = '家'">家</view>
						<view class="tag-2" :class="{ active: CneeAddress.Tag == '公司' }" @tap="CneeAddress.Tag = '公司'">公司</view>
						<view class="tag-2" :class="{ active: CneeAddress.Tag == '学校' }" @tap="CneeAddress.Tag = '学校'">学校</view>
					</view>
				</view>
			</view>
			<view class="qui-cell">
				<view class="cell-label"><text class="fs28 text-default">设为默认地址</text></view>
				<view class="cell-bd">
					<view class="flex justify-end">
						<switch :checked="CneeAddress.IsDef == 1 ? true : false" @change="changeDefault" :class="CneeAddress.IsDef == 1 ? 'checked' : ''" />
					</view>
				</view>
			</view>
		</view>
		<view class="padding">
			<view class="cu-btn bg-main lg round" style="width: 100%;" @tap="save">保存</view>
			<view class="cu-btn bg-white lg round mt20" style="width: 100%;" v-if="act == 'edit'" @tap="del">删除</view>
		</view>
	</view>
</template>
<script>
import base from 'utils/base.js';
import tools from 'utils/tools.js';
import mpvueCityPicker from '@/common/components/mpvue-citypicker/mpvueCityPicker';
let _self;
export default {
	components: {
		mpvueCityPicker
	},
	data() {
		return {
			optid: 0,
			act: '',
			imgurl: this.$imgurl,
			activeIndex: 1,
			switchB: false,
			cityPicker: {
				cityPickerValue: [18, 0, 0],
				themeColor: '#007AFF',
				region: { label: '请点击选择地址', value: [], cityCode: '' }
			},
			CneeAddress: {
				CneeID: 0,
				Address: '',
				AreaID: 0,
				City: '广州市',
				CityId: 440100,
				CneeAddr: '',
				CneeUser: '',
				District: '荔湾区',
				DistrictId: 440103,
				IsDef: 0,
				Phone: '',
				Province: '广东省',
				ProvinceId: 440000,
				Status: 0,
				Tag: '家'
			}
		};
	},
	onLoad(options) {
		_self = this;
		_self.optid = options.id;
		_self.act = options.act || 'add';
	},
	methods: {
		delBtn() {
			uni.showModal({
				content: `确认删除收货地址`,
				confirmText: '删除',
				cancelColor: '#171717',
				confirmColor: '#ff5e1f',
				success: function(res) {
					if (res.confirm) {
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		changeDefault(e) {
			this.CneeAddress.IsDef = e.detail.value ? 1 : 0;
		},
		onCancel(e) {},
		chooseCity() {
			this.$refs.mpvueCityPicker.show();
		},
		onConfirm(e) {
			this.cityPicker.region = e;
			this.cityPicker.cityPickerValue = e.value;
			this.CneeAddress.Province = e.province;
			this.CneeAddress.ProvinceId = e.provinceCode;
			this.CneeAddress.City = e.city;
			this.CneeAddress.CityId = e.cityCode;
			this.CneeAddress.District = e.area;
			this.CneeAddress.DistrictId = e.areaCode;
			this.CneeAddress.CneeAddr = this.CneeAddress.Province + this.CneeAddress.City + this.CneeAddress.District + this.CneeAddress.Address;
		},
		del: function() {
			let currentPage = this;
			uni.showModal({
				confirmColor: '#ff5e1f',
				title: '提示',
				content: '确定要删除吗',
				success: function(res) {
					if (res.confirm) {
						let params = {
							type: 'GET',
							url: '/api/CneeAddress/DeleteCneeAddress',
							data: { cneeID: currentPage.CneeAddress.CneeID },
							sCallback: function(response) {
								if (response.IsSuccess) {
									uni.navigateBack({
										delta: 1
									});
								}
							}
						};
						base.request(params);
					}
				}
			});
		},
		save: function() {
			let currentPage = this;
			var cnee = currentPage.CneeAddress;
			if (!tools.IsChineseName(cnee.CneeUser)) {
				tools.showToast('请填写收货人姓名');
				return;
			}
			if (!tools.IsPhone(cnee.Phone)) {
				tools.showToast('请填写收货人电话');
				return;
			}
			if (cnee.DistrictId == 0) {
				tools.showToast('请选择所在地区');
				return;
			}
			if (cnee.Address.trim() == '') {
				tools.showToast('请填写详细地址');
				return;
			}
			let url = '/api/CneeAddress/AddCneeAddress';
			if (cnee.CneeID > 0) url = '/api/CneeAddress/EditCneeAddress';
			let params = {
				type: 'POST',
				url: url,
				data: cnee,
				sCallback: function(response) {
					if (response.IsSuccess) {
						uni.navigateBack({
							delta: 1
						});
					}
				}
			};
			base.request(params);
		},
		GetCneeAddress: function() {
			let currentPage = this;
			if (currentPage.optid > 0) {
				let params = {
					type: 'GET',
					url: '/api/CneeAddress/GetCneeAddress',
					data: { cneeID: currentPage.optid },
					sCallback: function(response) {
						if (response.IsSuccess) {
							let m = response.Data;
							currentPage.CneeAddress = m;
						}
					}
				};
				base.request(params);
			}
		}
	},
	mounted() {
		let currentPage = this;
		currentPage.GetCneeAddress();
	}
};
</script>

<style lang="scss" scoped>
.tag-2 {
	width: 107upx;
	height: 43upx;
	background-image: linear-gradient(#f7f7f7, #f7f7f7), linear-gradient(#ffffff, #ffffff);
	border-radius: 5upx;
	font-size: 24upx;
	line-height: 43upx;
	text-align: center;
	border: 2upx solid #f7f7f7;
	box-sizing: border-box;
}
.tag-2 + .tag-2 {
	margin-left: 10px;
}
.tag-2.active {
	border-color: #ff5e1f;
	color: #ff5e1f;
	background-color: #fff;
}
</style>
